<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 订单统计</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/indentInfoView' }">订单统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <div class="block">
                <!-- {{ pladate }} -->
                <span class="demonstration">时间</span>
                <el-date-picker value-format="yyyy-MM-dd" v-model="pladate" type="date" placeholder="选择日期">
                </el-date-picker>
                <el-button type="primary" style="margin-left: 20px;" @click="select">筛选</el-button>
            </div>
            <table>
                <tr v-for="el in list">
                    <td v-for="item in el">{{ item }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import { selectIndentInfo } from '@/api/orderStatistics.js'
export default {
    data() {
        return {
            pladate: '',
            list: [],
        };
    },
    mounted() {
        this.ajaxfunction()
    },
    methods: {
        async ajaxfunction() {

            const res = await selectIndentInfo({ pladate: this.pladate })
            // console.log(res.data);
            if (res.code == 200) {

                // 区县写死 用于存放表头数据
                var obj = { area: '区县', }

                // 用于存放第一列数据
                var arr = []  //['北京路', '上海路', '南京路', '上海路']
                for (var i = 0; i < res.data.length; i++) {
                    // 表头
                    obj["serve" + i] = res.data[i].typename
                    // 第一列每一个路
                    for (var j = 0; j < res.data[i].indentInfo2s.length; j++) {
                        arr.push(res.data[i].indentInfo2s[j].area)
                    }
                }

                obj.total = '总计'
                //obj={area: '区县', serve0: '汽车保养', serve1: '汽车维修', serve2: '洗车', total: '总计'}
                // 将表头存入表格数据
                this.list.push(obj)

                // 将重复的第一列的道路去重  
                let rArr = [...new Set(arr)];    //['北京路', '上海路', '南京路']
                // 将第一列每一个路存进表格数据
                for (var i = 0; i < rArr.length; i++) {
                    this.list.push({ area: rArr[i] })
                }

                // 为每一个对象赋值  获取每一条路对应的数据
                for (var i = 0; i < this.list.length; i++) {
                    for (var j = 0; j < res.data.length; j++) {
                        for (var k = 0; k < res.data[j].indentInfo2s.length; k++) {
                            // 不要第一条表头
                            if ((i + 1) != this.list.length) {
                                // 判断有没有这个地址的数据 如果有则赋值num 否则为0
                                if (this.list[i + 1].area == res.data[j].indentInfo2s[k].area) {
                                    this.list[i + 1]["num" + j] = res.data[j].indentInfo2s[k].num
                                    break;

                                } else {
                                    this.list[i + 1]["num" + j] = 0
                                }

                            }
                        }
                    }
                }
                // 理想情况下的数据:{area:'上海路',num0: 0, num1: 2, num2: 4}


                // 计算每一个对象的和
                for (var i = 0; i < this.list.length; i++) {
                    // console.log(this.list[i]);
                    if ((i + 1) != this.list.length) {
                        var sum = 0
                        for (var key in this.list[i + 1]) {
                            // 判断是不是数值
                            if (typeof this.list[i + 1][key] === 'number') {
                                sum += this.list[i + 1][key]
                            }
                        }
                        this.list[i + 1].total = sum
                    }
                }
                // 理想情况下的数据:{area:'上海路',num0: 0, num1: 2, num2: 4, total: 6}

                var all = { area: '总计' }
                // 先给总计赋值对应的属性
                for (var key in this.list[1]) {
                    if (key != 'area') {
                        all[key] = 0
                    }

                }
                // {area: '总计', num0: 0, num1: 0, num2: 0, total: 0}

                // 用来存放每条路的数据
                var arr2 = []  //  [[2, 0, 0, 2],[0, 2, 4, 6],[0, 4, 0, 4]]
                for (var i = 0; i < this.list.length; i++) {
                    if ((i + 1) != this.list.length) {
                        // 对象的值转化为数组
                        const arr3 = Object.values(this.list[i + 1]);
                        // 过滤掉地址
                        var newArr = arr3.filter((val) => {
                            return typeof val === 'number'
                        })
                        arr2.push(newArr)
                    }

                }

                // 计算每条路对应下标的总和然后存放在数组里
                var lastArr = []
                for (var j = 0; j < arr2[0].length; j++) {

                    // 计算
                    var result = sumElementAtIndex(arr2, j);
                    lastArr.push(result)
                }

                // 封装计算数组中对应下标数据相加
                function sumElementAtIndex(arrays, index) {
                    let sum = 0;

                    for (let i = 0; i < arrays.length; i++) {
                        sum += arrays[i][index];
                    }
                    return sum;
                }

                // i是总计数据的下标
                var i = 0
                // 将总计的数值传给总计对象
                for (var key in all) {
                    if (key != 'area') {
                        // console.log(key);
                        all[key] = lastArr[i]
                        i++
                    }
                }

                // 将最后总计放入数组
                this.list.push(all)

                this.$message({
                    message: '查询成功',
                    type: 'success'
                });
            } else {
                this.list = [{
                    area: "区县",
                    total: '总计'
                }, {
                    area: "总计",
                    total: 0
                },]
                this.$message({
                    message: res.msg,
                    type: 'warning'
                });

            }
        },
        select() {
            this.list = []
            this.ajaxfunction()
            // this.$message({
            //     message: '查询完成',
            //     type: 'success'
            // });
        }
    }
};
</script>

<style   scoped>
.container {
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 90%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

.block {
    margin: 30px 0 30px 50px;

}

.demonstration {
    margin-right: 20px;
}

table,
th,
tr,
td {
    border: 1px solid transparent;
}

td {
    background-color: #f5f1f1;
}

tr {
    text-align: center;
}

table tr:first-child td,
table tr td:first-child {
    background-color: #c5c5c5;
}

table tr:first-child td {
    font-weight: bold;
}

table {
    width: 100%;
    height: 300px;
    margin: auto;
}
</style>
